<template>
    <div class="white-box">
        <div class="table-mb">
            <!-- <el-button type="primary" @click="clickUpdate(1)">添加</el-button> -->
            <!-- <el-button type="default" plain @click="allDel">批量删除</el-button> -->
        </div>

        <!-- @selection-change="handleAllSelected" -->
        <el-table
            class="table-mb"
            v-loading="loading"
            :data="arr_data"
            :header-cell-style="{ background: '#F5F7FA' }"
            element-loading-background="rgba(255, 255, 255, 0.6)"
        >
            <!-- <el-table-column type="selection" width="55" /> -->
            <el-table-column prop="shelve_id" label="ID" width="80"></el-table-column>
            <el-table-column prop="title" label="货架号"></el-table-column>
            <el-table-column prop="min_nums" label="最小商品重量"></el-table-column>
            <el-table-column prop="max_nums" label="最大商品重量"></el-table-column>
            <el-table-column prop="updated_at_label" label="更新时间" width="160"></el-table-column>
            <el-table-column label="操作" width="210" class-name="operation-nav" fixed="right">
                <template #default="{ row }">
                    <el-button class="theme-btn" link type="primary" @click="clickUpdate(2, row)">编辑</el-button>
                    <!-- <el-popconfirm title="是否确定删除？" confirm-button-text="确定" cancel-button-text="取消" @confirm="handleDelete(row)">
                        <template #reference>
                            <el-button class="theme-btn" link type="primary">删除</el-button>
                        </template>
                    </el-popconfirm> -->
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
            background
            v-model:current-page="page"
            v-model:page-size="pageSize"
            :page-sizes="pageSizeNum"
            :total="totalNums"
            layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>

        <!-- 添加/编辑 -->
        <el-dialog
            v-model="dialogZd"
            :title="classType == 1 ? '添加货架号' : '编辑货架号'"
            width="620px"
            :append-to-body="true"
            :destroy-on-close="true"
            :close-on-click-modal="false"
            @close="closeAddZd"
        >
            <el-form ref="ruleZdRef" :model="ruleZdForm" :rules="ruleCheckZd" label-width="150px">
                <el-form-item label="货架号" prop="title">
                    <el-input v-model.trim="ruleZdForm.title" clearable :disabled="true" placeholder="请输入货架号" />
                </el-form-item>
                <el-form-item label="最小商品重量" prop="min_nums" required>
                    <el-input
                        v-model="ruleZdForm.min_nums"
                        clearable
                        oninput="value=value.replace(/[^\d.]/g,'')"
                        placeholder="请输入最小商品重量"
                    />
                </el-form-item>
                <el-form-item label="最大商品重量" prop="max_nums" required>
                    <el-input
                        v-model="ruleZdForm.max_nums"
                        clearable
                        oninput="value=value.replace(/[^\d.]/g,'')"
                        placeholder="请输入最大商品重量"
                    />
                </el-form-item>
                <el-form-item>
                    <div class="flexs" style="margin-top: 20px">
                        <el-button type="primary" :loading="form_loading" @click="submitZdForm(ruleZdRef)">
                            {{ classType == 1 ? "确认添加" : "确认修改" }}
                        </el-button>
                        <el-button @click="resetZdForm(ruleZdRef)">重置</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script setup>
import { getCurrentInstance, ref, onMounted, watch, reactive,onBeforeUnmount } from "vue"
import OneLoad from "@mixins/one-load"

const { proxy } = getCurrentInstance()

onMounted(() => {
    getList()
})

onBeforeUnmount(() => {
   
})

/**
 * minxin列表加载
 */
const { page, pageSizeNum, pageSize, loading, arr_data, totalNums, pubParams, getdata } = OneLoad()
// 切换每页显示条数
watch(pageSize, (val) => {
    page.value = 1
    pubParams(getList)
})
// 跳转第几页
watch(page, (val) => {
    pubParams(getList)
})


function getList() {
    let params = {
        page: page.value,
        limit: pageSize.value,
    }
    getdata("shelve/index", params)
}

/**
 * 添加/编辑
 * @property {Boolean} dialogZd 添加/编辑弹窗状态
 * @property {Boolean} form_loading 提交按钮状态
 * @property {Number} classType 弹窗类型，1是添加，2是编辑
 * @property {Array} ruleZdRef 表单规则
 * @property {Object} ruleZdForm  表单字段
 * @property {Object} ruleCheckZd  表单提示
 * @property {Function} submitZdForm 提交表单
 * @property {Function} closeAddZd 关闭弹窗
 */
const dialogZd = ref(false)
const form_loading = ref(false)
const classType = ref(1)
const ruleZdRef = ref(null)
const ruleZdForm = reactive({
    id: "",
    title: "",
    min_nums: "",
    max_nums: "",
})
const ruleCheckZd = reactive({
    title: [{ required: true, message: "请输入货架号", trigger: "blur" }],
    min_nums: [{ required: true, validator: proxy.$util.validNumOrPoint, trigger: "blur" }],
    max_nums: [{ required: true, validator: proxy.$util.validNumOrPoint, trigger: "blur" }],
})
const submitZdForm = (formEl) => {
    if (!formEl) return
    formEl.validate((valid, fields) => {
        if (valid) {
            form_loading.value = true
            let data = {
                // title: ruleZdForm.title,
                min_nums: ruleZdForm.min_nums,
                max_nums: ruleZdForm.max_nums,
            }
            if (classType.value == 2) {
                data.shelve_id = ruleZdForm.id
            }
            let url = classType.value == 1 ? "" : "shelve/update"
            proxy.$axios
                .post(url, data)
                .then((res) => {
                    form_loading.value = false
                    if (res.data.code == 0) {
                        dialogZd.value = false
                        proxy.$message({ message: `${classType.value == 1 ? '添加成功！' : '编辑成功！'}`, type: "success" })
                        pubParams(getList)
                    } else {
                        proxy.$message({message:res.data.msg,type:"error"})
                    }
                })
                .catch((err) => {
                    form_loading.value = false
                })
        }
    })
}
const resetZdForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
}

// 添加/编辑
const clickUpdate = (type, row) => {
    classType.value = type
    dialogZd.value = true
    if (type == 2) {
        setTimeout(() => {
            ruleZdForm.id = row.shelve_id
            ruleZdForm.title = row.title
            ruleZdForm.max_nums = row.max_nums
            ruleZdForm.min_nums = row.min_nums
        }, 50)
    }
}
const closeAddZd = () => {
    dialogZd.value = false
    resetZdForm(ruleZdRef.value)
}

// 删除单个
// const handleDelete = (row) => {
//     postDel(row.id)
// }
// 删除多个
// const ids = ref([])
// const handleAllSelected = (val) => {
//     let arrs = []
//     for (let i = 0; i < val.length; i++) {
//         arrs.push(val[i].id)
//     }
//     ids.value = arrs
// }
// const allDel = () => {
//     if (ids.value.length == 0) {
//         proxy.$message({ message: "请选择需要删除的数据", type: "warning" })
//         return
//     }
//     postDel(ids.value)
// }
// 删除接口
// function postDel(params) {
//     proxy.$axios
//         .post("", {
//             extra_id: params,
//         })
//         .then((res) => {
//             if (res.data.code == 0) {
//                 pubParams(getList)
//             } else {
//                 proxy.$message({message:res.data.msg,type:"error"})
//             }
//         })
//         .catch((err) => {})
// }

</script>
<script>
export default {
    name: "ShelveManage",
}
</script>

<style lang="less" scoped></style>
